<div class="position-relative">
  {% comment %} 手与小图散开 {% endcomment %}
  <div class="section-1 container-topic px-0 position-relative" style="height: 170vh;">
    <div class="as-trigger-1"></div>
    <div
      class="pt-md-9 pt-7 section-padding section-1-wrapper position-sticky top-0 overflow-hidden"
      style="height:100vh;"
    >
      <div class="w-100 h-100 d-flex flex-column position-relative">
        <div class="container pb-md-0 pb-4">
          <div class="d-flex align-items-center justify-content-center flex-column flex-lg-row">
            <div class="google-play me-lg-5 me-0 mb-lg-0 mb-1">
              <picture class="d-md-block d-none">
                <img
                  class="object-fit-cover"
                  src="{{ section.settings.text_image_on_desktop | img_url: 'master' }}"
                  alt="{{ section.settings.text_image_on_desktop | escape }}"
                  loading="lazy"
                  width="{{ section.settings.text_image_on_desktop.width | divided_by: 2 }}"
                  height="{{ section.settings.text_image_on_desktop.height | divided_by: 2 }}"
                >
              </picture>
              <picture class="d-md-none d-block">
                <img
                  class="object-fit-cover"
                  src="{{ section.settings.text_image_on_mobile | img_url: 'master' }}"
                  alt="{{ section.settings.text_image_on_mobile | escape }}"
                  loading="lazy"
                  width="{{ section.settings.text_image_on_mobile.width | divided_by: 2 }}"
                  height="{{ section.settings.text_image_on_mobile.height | divided_by: 2 }}"
                >
              </picture>
            </div>
            <h2 class="display-3 google-heading text-center section-heading fw-bold mb-md-0 mb-0">{{ section.settings.heading }}</h2>
           
          </div>
        </div>
        {% comment %} 图片散开与手 {% endcomment %}
        <div class="pics position-relative d-flex justify-content-center">
          <div class="container hand-pic position-absolute d-flex justify-content-center">
            {% comment %} style="z-index:10;" {% endcomment %}
            <div class="d-flex justify-content-center w-100 as-product-band-pic" style="z-index:10;">
              <picture class="">
                <img
                  class="object-fit-cover hand-image as-hand-image"
                  src="{{ section.settings.hand_image | img_url: 'master' }}"
                  alt="{{ section.settings.hand_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
            <div class="position-absolute init-style svg-1 as-icon-pic pic-animation">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.00031 15.9997C9.58557 15.9996 11.1351 15.5286 12.4521 14.6464C13.7692 13.7642 14.7945 12.5106 15.3979 11.0447C16.0012 9.57876 16.1555 7.96665 15.841 6.41293C15.5266 4.85921 14.7576 3.43394 13.6317 2.31802C12.5057 1.20209 11.0737 0.445819 9.51718 0.145184C7.9607 -0.15545 6.34998 0.013108 4.88947 0.629467C3.42895 1.24583 2.18448 2.2822 1.31401 3.60704C0.443526 4.93189 -0.0137154 6.48548 0.000313398 8.07064C0.000271654 9.11788 0.20769 10.1548 0.610589 11.1214C1.01349 12.088 1.60388 12.9653 2.34769 13.7025C3.0915 14.4397 3.97399 15.0223 4.94419 15.4166C5.91439 15.8108 6.95309 16.009 8.00031 15.9997Z" fill="#1ED760"/>
              </svg>
            </div>
            <div class="position-absolute init-style svg-2 as-icon-pic pic-animation">
              <svg width="43" height="44" viewBox="0 0 43 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.6539 1.42908C20.3378 -0.211658 22.6622 -0.211658 23.3461 1.42908L28.5006 13.7958C28.6996 14.2733 29.0759 14.6551 29.5504 14.861L41.7726 20.1653C43.3776 20.8619 43.3776 23.1381 41.7726 23.8347L29.5504 29.139C29.0759 29.3449 28.6996 29.7267 28.5006 30.2042L23.3461 42.5709C22.6622 44.2117 20.3378 44.2117 19.6539 42.5709L14.4994 30.2042C14.3004 29.7267 13.9241 29.3449 13.4496 29.139L1.22743 23.8347C-0.377592 23.1381 -0.37759 20.8619 1.22743 20.1653L13.4496 14.861C13.9241 14.6551 14.3004 14.2733 14.4994 13.7958L19.6539 1.42908Z" fill="#DD0000"/>
              </svg>
            </div>
            <div class="position-absolute init-style svg-3 as-icon-pic pic-animation">
              <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="-0.149902" y="14.5938" width="20.6394" height="20.6394" rx="1" transform="rotate(-45 -0.149902 14.5938)" fill="#1A98FF"/>
              </svg>
            </div>
            <div class="position-absolute init-style svg-4 as-icon-pic pic-animation">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 10C5.9889 10 6.9556 9.70676 7.77785 9.15735C8.6001 8.60794 9.24096 7.82705 9.6194 6.91342C9.99783 5.99979 10.0969 4.99445 9.90392 4.02455C9.711 3.05464 9.23479 2.16373 8.53553 1.46447C7.83627 0.765205 6.94535 0.289002 5.97545 0.0960758C5.00555 -0.0968503 4.00021 0.00216659 3.08658 0.380605C2.17295 0.759043 1.39206 1.3999 0.842651 2.22215C0.293244 3.0444 0 4.01109 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C2.40215 9.47322 3.67392 10 5 10Z" fill="#BB0021"/>
              </svg>
            </div>

            <div class="position-absolute init-style svg-5 as-icon-pic pic-animation">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect y="12.3301" width="16.8554" height="16.8554" rx="1" transform="rotate(-45 0 12.3301)" fill="#BB0021"/>
              </svg>
            </div>

            <div class="position-absolute init-style svg-6 as-icon-pic pic-animation">
              <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.2737 1.95055C23.0461 0.630509 24.954 0.630513 25.7263 1.95056L32.9634 14.3204C33.1367 14.6166 33.3834 14.8633 33.6796 15.0366L46.0494 22.2737C47.3695 23.0461 47.3695 24.954 46.0494 25.7263L33.6796 32.9634C33.3834 33.1367 33.1367 33.3834 32.9634 33.6796L25.7263 46.0494C24.9539 47.3695 23.046 47.3695 22.2737 46.0494L15.0366 33.6796C14.8633 33.3834 14.6166 33.1367 14.3204 32.9634L1.95055 25.7263C0.630509 24.9539 0.630513 23.046 1.95056 22.2737L14.3204 15.0366C14.6166 14.8633 14.8633 14.6166 15.0366 14.3204L22.2737 1.95055Z" fill="#1A98FF"/>
              </svg>
            </div>

            <div class="position-absolute init-style svg-7 as-icon-pic pic-animation">
              <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.00016 7.99984C4.79278 7.99981 5.56753 7.7643 6.22607 7.3232C6.88461 6.88209 7.39726 6.25529 7.69894 5.52234C8.00062 4.78938 8.07774 3.98332 7.92051 3.20646C7.76328 2.42961 7.37878 1.71697 6.81583 1.15901C6.25287 0.601045 5.53683 0.222909 4.75859 0.0725922C3.98035 -0.0777249 3.17499 0.00655402 2.44473 0.314734C1.71447 0.622913 1.09224 1.1411 0.657003 1.80352C0.221763 2.46594 -0.00685769 3.24274 0.000156699 4.03532C0.000135827 4.55894 0.103845 5.07738 0.305295 5.5607C0.506744 6.04402 0.801942 6.48264 1.17385 6.85125C1.54575 7.21985 1.987 7.51114 2.4721 7.70828C2.9572 7.90542 3.47655 8.00452 4.00016 7.99984Z" fill="#1D428A"/>
              </svg>
            </div>

            <div class="position-absolute init-style icon-1 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_1 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_1.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

            <div class="position-absolute init-style icon-2 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_2 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_2.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

            <div class="position-absolute init-style icon-3 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_3 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_3.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
            <div class="position-absolute init-style icon-4 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_4 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_4.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
            <div class="position-absolute init-style icon-5 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_5 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_5.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

            <div class="position-absolute init-style icon-6 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_6 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_6.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
            <div class="position-absolute init-style icon-7 as-icon-pic pic-animation">
              <picture>
                <img
                  class="object-fit-cover w-100"
                  src="{{ section.settings.icon_7 | img_url: 'master' }}"
                  alt="{{ section.settings.icon_7.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="as-trigger-2"></div>
  </div>

  {% comment %} 左右图 {% endcomment %}
  {% comment %} bg-danger {% endcomment %}
  <div class="section-2 as-section-2 position-relative " style="z-index:12;">
    <div class="as-trigger-3" style=""></div>
    {% comment %} section-padding {% endcomment %}
    <div
      class="section-2-wrapper as-section2-wrapper position-sticky top-0"
    >
      <div class="w-100 h-100 d-flex flex-column position-relative">
        <div class="container pb-7 heading-title as-section2-title pt-lg-9 pt-7 section-padding">
          <div class="d-flex align-items-center justify-content-center flex-column flex-md-row">
            <h2 class="heading-second as-heading-second fw-bold text-center mb-md-0 mb-0">
              {{ section.settings.heading2 | replace: '<p>', '<p class="display-3 section-heading mb-0 fw-bold">' }}
            </h2>
            <div class="d-lg-block d-none as-placeholder-heading-second heading-second fw-bold text-center mb-md-0 mb-0 position-absolute">
              <p class="display-3 section-heading mb-0 fw-bold">test<br>test</p>
            </div>
          </div>
        </div>
        <div class="as-placeholder-element d-lg-none d-block"></div>
        <div class="position-relative pics w-100 overflow-hidden">
          <div
            class="left-pics as-margin-pics d-flex flex-column justify-content-center pics-list position-absolute h-100"
          >
            <div class="pics-line-1 d-flex">
              <div class="item-pic as-pic-1 as-pic-1-1 as-pic-mobile-6 as-pic-one-by-one-1">
                {% assign desktop_image = section.settings.demo_image_on_1 %}
                {% assign mobile_image = section.settings.mobile_image_on_1 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-2 as-pic-mobile-5 as-pic-one-by-one-2">
                {% assign desktop_image = section.settings.demo_image_on_2 %}
                {% assign mobile_image = section.settings.mobile_image_on_2 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-3 as-pic-mobile-4 as-pic-one-by-one-3">
                {% assign desktop_image = section.settings.demo_image_on_3 %}
                {% assign mobile_image = section.settings.mobile_image_on_3 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-4 as-pic-mobile-3 as-pic-one-by-one-4">
                {% assign desktop_image = section.settings.demo_image_on_4 %}
                {% assign mobile_image = section.settings.mobile_image_on_4 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-mobile-2 d-lg-none d-block as-pic-one-by-one-5">
                {% assign desktop_image = section.settings.demo_image_on_5 %}
                {% assign mobile_image = section.settings.mobile_image_on_5 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-mobile-1 d-lg-none d-block as-pic-one-by-one-6">
                {% assign desktop_image = section.settings.demo_image_on_6 %}
                {% assign mobile_image = section.settings.mobile_image_on_6 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
            </div>
            <div class="pics-line-2 d-flex d-lg-flex d-none">
              <div class="item-pic as-pic-1">
                {% assign desktop_image = section.settings.demo_image_on_5 %}
                {% assign mobile_image = section.settings.mobile_image_on_5 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-2">
                {% assign desktop_image = section.settings.demo_image_on_6 %}
                {% assign mobile_image = section.settings.mobile_image_on_6 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-3">
                {% assign desktop_image = section.settings.demo_image_on_7 %}
                {% assign mobile_image = section.settings.mobile_image_on_7 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-4">
                {% assign desktop_image = section.settings.demo_image_on_8 %}
                {% assign mobile_image = section.settings.mobile_image_on_8 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
            </div>
          </div>
          <div
            class="right-pics  d-flex flex-column justify-content-center pics-list position-absolute h-100"
          >
            <div class="pics-line-1 d-flex justify-content-end">
              <div class="item-pic as-pic-4 as-pic-mobile-6 as-pic-one-by-one-7">
                {% assign desktop_image = section.settings.demo_image_on_9 %}
                {% assign mobile_image = section.settings.mobile_image_on_9 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-3 as-pic-mobile-5 as-pic-one-by-one-8">
                {% assign desktop_image = section.settings.demo_image_on_10 %}
                {% assign mobile_image = section.settings.mobile_image_on_10 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-2 as-pic-mobile-4 as-pic-one-by-one-9">
                {% assign desktop_image = section.settings.demo_image_on_11 %}
                {% assign mobile_image = section.settings.mobile_image_on_11 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-1 as-pic-mobile-3 as-pic-one-by-one-10">
                {% assign desktop_image = section.settings.demo_image_on_12 %}
                {% assign mobile_image = section.settings.mobile_image_on_12 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-1 as-pic-mobile-2 d-lg-none d-block as-pic-one-by-one-11">
                {% assign desktop_image = section.settings.demo_image_on_13 %}
                {% assign mobile_image = section.settings.mobile_image_on_13 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-1 as-pic-mobile-1 d-lg-none d-block as-pic-one-by-one-12">
                {% assign desktop_image = section.settings.demo_image_on_14 %}
                {% assign mobile_image = section.settings.mobile_image_on_14 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
            </div>
            <div class="pics-line-2 d-flex justify-content-end mt-4 d-lg-flex d-none">
              <div class="item-pic as-pic-4">
                {% assign desktop_image = section.settings.demo_image_on_13 %}
                {% assign mobile_image = section.settings.mobile_image_on_13 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-3">
                {% assign desktop_image = section.settings.demo_image_on_14 %}
                {% assign mobile_image = section.settings.mobile_image_on_14 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-2">
                {% assign desktop_image = section.settings.demo_image_on_15 %}
                {% assign mobile_image = section.settings.mobile_image_on_15 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
              <div class="item-pic as-pic-1">
                {% assign desktop_image = section.settings.demo_image_on_16 %}
                {% assign mobile_image = section.settings.mobile_image_on_16 %}
                <picture class="w-100">
                  <source media="(max-width: 767px)" srcset="{{ mobile_image | img_url: 'master' }}">
                  <img class="w-100 object-fit-cover " loading="lazy" src="{{ desktop_image | img_url: 'master' }}" alt="{{ desktop_image.alt | escape }}">
                </picture>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% comment %} 产品图片 {% endcomment %}
  <div class="section-3 w-100 position-absolute top-0 as-section-3" style="z-index:10;">
    <div class="section-3-wrapper position-sticky top-0 overflow-hidden" style="height:100vh;">
      {% comment %}
        <div class="container pb-md-6 pb-4 " style="visibility: hidden;">
          <div class="d-flex align-items-center justify-content-center flex-column flex-md-row">
            <h2 class="heading-second as-heading-second fw-bold me-md-5 me-0 mb-md-0 mb-2">
              {{ section.settings.heading2 | replace: '<p>', '<p class="display-1 mb-0">' }}
            </h2>
          </div>
        </div>
      {% endcomment %}
      <div class="position-relative pics w-100 h-100">
        <div class="container hand-pic as-hand-pic hand-product-pic position-absolute d-flex justify-content-center">
          <div class="position-relative w-100" style="z-index:10;">
            <picture>
              <img
                class="object-fit-cover hand-image as-hand-image"
                src="{{ section.settings.product_image | img_url: 'master' }}"
                alt="{{ section.settings.product_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
            <div class="position-absolute as-shadow-pic w-100 h-100 top-0 overflow-hidden" style="z-index:-1;opacity:0;">
              <picture class="shadow">
                <img
                  class="object-fit-cover shadow-image w-100"
                  src="{{ section.settings.product_shadow_image_on_desktop | img_url: 'master' }}"
                  alt="{{ section.settings.product_shadow_image_on_desktop.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="as-trigger-4"></div>
</div>
{% schema %}
{
  "name": "Station Resources",
  "tag": "section",
  "class": "station-resources-container as-station-resources",
  "settings": [
    {
      "type": "header",
      "content": "Banner 1"
    },
    {
      "type": "header",
      "content": "IMAGE"
    },
    {
      "type": "image_picker",
      "id": "product_image",
      "label": "Product image"
    },
    {
      "type": "image_picker",
      "id": "text_image_on_desktop",
      "label": "Text image on desktop"
    },
    {
      "type": "image_picker",
      "id": "text_image_on_mobile",
      "label": "Text image on mobile"
    },
    {
      "type": "image_picker",
      "id": "hand_image",
      "label": "Hand image"
    },
    {
      "type": "image_picker",
      "id": "product_shadow_image_on_desktop",
      "label": "Product shadow image"
    },
    {
      "type": "image_picker",
      "id": "icon_1",
      "label": "Icon 1"
    },
    {
      "type": "image_picker",
      "id": "icon_2",
      "label": "Icon 2"
    },
    {
      "type": "image_picker",
      "id": "icon_3",
      "label": "Icon 3"
    },
    {
      "type": "image_picker",
      "id": "icon_4",
      "label": "Icon 4"
    },
    {
      "type": "image_picker",
      "id": "icon_5",
      "label": "Icon 5"
    },
    {
      "type": "image_picker",
      "id": "icon_6",
      "label": "Icon 6"
    },
    {
      "type": "image_picker",
      "id": "icon_7",
      "label": "Icon 7"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "Anything in",
      "label": "Heading"
    },
    {
      "type": "header",
      "content": "Banner 2"
    },
    {
      "type": "header",
      "content": "IMAGE"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_1",
      "label": "PC demo image on 1"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_1",
      "label": "Mobile demo image on 1"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_2",
      "label": "Demo image on 2"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_2",
      "label": "Mobile demo image on 2"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_3",
      "label": "Demo image on 3"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_3",
      "label": "Mobile demo image on 3"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_4",
      "label": "Demo image on 4"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_4",
      "label": "Mobile demo image on 4"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_5",
      "label": "Demo image on 5"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_5",
      "label": "Mobile demo image on 5"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_6",
      "label": "Demo image on 6"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_6",
      "label": "Mobile demo image on 6"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_7",
      "label": "Demo image on 7"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_7",
      "label": "Mobile demo image on 7"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_8",
      "label": "Demo image on 8"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_8",
      "label": "Mobile demo image on 8"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_9",
      "label": "Demo image on 9"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_9",
      "label": "Mobile demo image on 9"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_10",
      "label": "Demo image on 10"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_10",
      "label": "Mobile demo image on 10"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_11",
      "label": "Demo image on 11"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_11",
      "label": "Mobile demo image on 11"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_12",
      "label": "Demo image on 12"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_12",
      "label": "Mobile demo image on 12"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_13",
      "label": "Demo image on 13"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_13",
      "label": "Mobile demo image on 13"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_14",
      "label": "Demo image on 14"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_14",
      "label": "Mobile demo image on 14"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_15",
      "label": "Demo image on 15"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_15",
      "label": "Mobile demo image on 15"
    },
    {
      "type": "image_picker",
      "id": "demo_image_on_16",
      "label": "Demo image on 16"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_on_16",
      "label": "Mobile demo image on 16"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "richtext",
      "id": "heading2",
      "default": "<p>HDCP Compliant<br> & Cloud Gaming</p>",
      "label": "Heading2"
    }
  ]
}
{% endschema %}
